<?php
require_once(dirname(__FILE__) . "/start.inc");
global $CONFIG;
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>A/B Tester</title>
	<?php include("views/html_includes.php");?>
	<script type="text/javascript">
		$(document).ready(function(){
			tester = null;
			var overlayEnable = false;
			$('#testFrame').load(function(){
				tester = $("body *", $('#testFrame').get(0).contentWindow.document).abTester({
					window: $('#testFrame').get(0).contentWindow
				});
				tester.overlay();
				overlayEnable = true;
				$('#demoBtn').removeAttr('disabled');
				
			});

			if (!tester) {
				$('#demoBtn').attr('disabled', 'disabled');
			}
			$('#demoBtn').click(function(){
				if (overlayEnable) {
					tester.overlay('disable');
					$(this).val("Enable Overlay");
				} else {
					tester.overlay();
					$(this).val("Disable Overlay");
				}
				overlayEnable = !overlayEnable;
			});

			$("#testBtn").click(function(){
				if ($('#url').val()) {
					$('#testFrame').attr("src", 'http://localhost/abtester/edit/' + $('#url').val());
				}
			});
		});
	</script>
</head>
<body>
<input type="button" id="demoBtn" value="Disable Overlay" />
<div id="wrapper">
	<div id="header">
		<div style="text-align: center;">
			<input type="text" id="url" value="http://www.baidu.com" style="width: 400px;"/>
			<input type="button" class="button" id="testBtn" value="Test it now"/>
		</div>
	</div>
	<div id="main" style="">
		<table style="width:100%; height: 300px;display: none;">
			<tr>
				<td style="text-align: center; vertical-align: middle;">
					<div style="margin: 10px;font-weight: bold;font-size: 20px;">Only support IE8+, Firefox, Safari, Opera, Chrome</div>
					<form name="abtest" action="./disp.php" method="GET" onsubmit="return false;">
						<input type="text" name="url" style="width: 300px;"/>
						<input class="button" type="submit" value="Test it"/>
					</form>
				</td>
			</tr>
		</table>
		<iframe id="testFrame" src="http://localhost/abtester/edit/http://www.google.com" width="100%" height="600px"></iframe>
	</div>
	<div id="footer"></div>
</div>
</body>
</html>